<template>
    <div>
        <div align="center">
            <el-form style="background-color:#eef1f6;width: 80%;height:40px;" align="left" class="one">
                筛选查询
            </el-form>
            <el-form  :inline="true" class="demo-form-inline" style="width: 80%;">
                <el-form-item>
                    业务号：
                </el-form-item>
                <el-form-item>
                    <el-input v-model="byte.bbusiness" placeholder="业务号"></el-input>
                </el-form-item>
                <el-form-item>
                    申请人：
                </el-form-item>
                <el-form-item>
                    <el-input v-model="byte.bname" placeholder="申请人"></el-input>
                </el-form-item>
                <el-form-item>
                    时间：
                </el-form-item>
                <el-form-item>
                    <el-input v-model="byte.bbirthday" placeholder="申请时间"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button @click="queryemp" type="success">查询</el-button>
                </el-form-item>
            </el-form>
        </div>

        <br>
        <div align="center">
            <!-- <el-table :data="tableData" border> -->
            <el-table
                    :data="
                  tableData.slice((pageNum - 1) * pageSize, pageNum * pageSize)
                "
                    border
                    style="width: 80%"
                    :header-cell-style="{background:'#eef1f6',color:'#606266'}">
                <el-table-column prop="bbusiness" label="业务号"></el-table-column>
                <el-table-column prop="bname" label="申请人"></el-table-column>
                <el-table-column prop="btypeId" label="身份证号"></el-table-column>
                <el-table-column prop="bphone" label="联系电话"></el-table-column>
                <el-table-column prop="bbirthday" label="申请时间"></el-table-column>
                <el-table-column label="状态">
                    <template v-slot="s">
                        {{ Text[s.row.bstate - 1] }}
                    </template>
                </el-table-column>

                <el-table-column label="操作">
                    <template slot-scope="s">
                        <el-button v-show="s.row.bstate==6" type="primary" @click="sl(s.row)">查看</el-button>
                        <el-button v-show="s.row.bstate==7" type="primary" @click="sl(s.row)">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <el-dialog title="申请详情" :visible.sync="shou" :close-on-click-modal="false" fullscreen>
            <el-button type="text" @click="cmxz">村民小组讨论公示</el-button>
            <el-button type="text" @click="cjscbu">村级组织审查</el-button>
            <el-button type="text" @click="xzzfsc">乡镇政府审查</el-button>
            <el-button type="text" @click="nyncsc">农业农村部门审查</el-button>
            <el-button type="text" @click="zrzysc">自然资源部门审查</el-button>
            <el-button type="text" @click="xzsp">乡镇审批</el-button>
            <p>申请户主信息</p>
            <el-table :data="shoudata" border>
                <el-table-column prop="bname" label="姓名"></el-table-column>
                <el-table-column label="性别">
                    <template v-slot="s">
                        {{ sex[s.row.bsex] }}
                    </template>
                </el-table-column>
                <el-table-column prop="age" label="年龄">
                    <template v-slot="s">
                        {{getAge(s.row.bbirthday)}}
                    </template>
                </el-table-column>
                <el-table-column prop="btypeId" label="身份证号"></el-table-column>
                <el-table-column prop="bphone" label="联系电话"></el-table-column>
                <el-table-column prop="baddress" label="户口所在地"></el-table-column>
            </el-table>

            <p>家庭成员</p>
            <el-table :data="shoudata" border>
                <el-table-column prop="customerRelatives.reName" label="姓名"></el-table-column>
                <el-table-column prop="reage" label="年龄">
                    <template v-slot="s">
                        {{getreAge(s.row.customerRelatives.reBirthday)}}
                    </template>
                </el-table-column>
                <el-table-column prop="customerRelatives.reRelationship" label="与户主关系"></el-table-column>
                <el-table-column prop="customerRelatives.reTypeId" label="身份证号"></el-table-column>
                <el-table-column prop="customerRelatives.reAddress" label="户口所在地"></el-table-column>
            </el-table>

            <p>现宅基地及农房情况</p>
            <el-table :data="shoudata" border>
                <el-table-column prop="bbuiltAreas" label="宅基地面积"></el-table-column>
                <el-table-column prop="bareas" label="建筑面积"></el-table-column>
                <el-table-column prop="bareasAddres" label="地址"></el-table-column>
                <el-table-column prop="bland" label="地类"></el-table-column>
                <el-table-column prop="bfour" label="四至"></el-table-column>
            </el-table>
            <el-table :data="shoudata" border>
                <el-table-column prop="bbuilding" label="建房类型"></el-table-column>
                <el-table-column prop="bhousing" label="住房建筑面积"></el-table-column>
                <el-table-column prop="bnumber" label="建筑层数"></el-table-column>
                <el-table-column prop="bheight" label="建筑高度"></el-table-column>
                <el-table-column label="是否征求相邻权利人意见">
                    <template v-slot="s">
                        {{ bopin[s.row.bopinion-1] }}
                    </template>
                </el-table-column>
            </el-table>

            <br>

            <el-table :data="shoudata" border>
                <el-table-column prop="breason" label="申请理由"></el-table-column>
            </el-table>

            <br>

            <div align="right">
                <el-button @click="dun()">取消</el-button>
            </div>
        </el-dialog>

        <el-dialog title="村民小组讨论公示" :visible.sync="cmxzhx" :close-on-click-modal="false">
            <el-form label-width="100px">
                <el-form-item label="村小组文件">
                    <el-col :span="8">
<!--                        <el-button  type="text" @click="butt">{{byte.bvillageRecord}}</el-button>-->
                        <a target="_blank" :href="byte.bvillageRecord">查看村民小组文件</a>
                    </el-col>
                </el-form-item>
            </el-form>
            <div align="right">
                <el-button @click="cmxzhx=false">取消</el-button>
            </div>
        </el-dialog>

        <el-dialog title="村级组织审查意见" :visible.sync="cjsc" :close-on-click-modal="false">
            <el-form label-width="100px">
                <el-form-item label="审查意见">
                    <el-col :span="8">
                        <el-input v-model="byte.breviewComments"></el-input>
                    </el-col>
                </el-form-item>
            </el-form>
            <div align="right">
                <el-button @click="cjsc=false">取消</el-button>
            </div>
        </el-dialog>

        <el-dialog title="乡镇政府审查意见" :visible.sync="xzzf" :close-on-click-modal="false">
            <el-form label-width="100px">
                <el-form-item label="乡镇政府意见">
                    <el-col :span="8">
                        <el-input v-model="byte.btownshipComments"></el-input>
                    </el-col>
                </el-form-item>
            </el-form>
            <div align="right">
                <el-button @click="xzzf=false">取消</el-button>
            </div>
        </el-dialog>

        <el-dialog title="农业农村部门审查" :visible.sync="nync" :close-on-click-modal="false">
            <el-form label-width="100px">
                <el-form-item label="农业农村意见">
                    <el-col :span="8">
                        <el-input v-model="byte.bagricultureComments"></el-input>
                    </el-col>
                </el-form-item>
            </el-form>
            <div align="right">
                <el-button @click="nync=false">取消</el-button>
            </div>
        </el-dialog>

        <el-dialog title="自然资源部审查" :visible.sync="zrzy" :close-on-click-modal="false">
            <el-form label-width="100px">
                <el-form-item label="自然资源部意见">
                    <el-col :span="8">
                        <el-input v-model="byte.bnaturalComments"></el-input>
                    </el-col>
                </el-form-item>
            </el-form>
            <div align="right">
                <el-button @click="zrzy=false">取消</el-button>
            </div>
        </el-dialog>

        <el-dialog title="审批" :visible.sync="sp" :close-on-click-modal="false">
            <el-form label-width="100px">
                <el-form-item label="审批意见">
                    <el-col :span="8">
                        <el-input v-model="byte.bapprovalComments"></el-input>
                    </el-col>
                </el-form-item>
            </el-form>
            <div align="right">
                <el-button @click="sp=false">取消</el-button>
            </div>
        </el-dialog>

        <!--分页-->
        <div align="center">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[2, 3, 4, 5, tableData.length]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="tableData.length"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                pageNum: 1,
                pageSize: 2,

                byte:{},
                tableData: [],
                shoudata:[],
                Text: [
                    "待受理",
                    "待公示",
                    "待审查",
                    "联审联办",
                    "待审批",
                    "已办完",
                    "不予受理",
                ],
                sex:["女","男"],
                bopin:["征求","未征求"],
                shou:false,

                cmxzhx:false,
                cjsc:false,
                xzzf:false,
                nync:false,
                zrzy:false,
                sp:false
            };
        },

        //预加载
        created() {
            this.loadData();
        },
        methods: {

            handleSizeChange(pageSize) {
                this.pageSize = pageSize;
            },
            handleCurrentChange(pageNum) {
                this.pageNum = pageNum;
            },
            queryemp(){
                this.loadData()
            },
            loadData() {
                console.log(this.byte)
                this.postRequest("/house/building/yibanlist",this.byte)
                    .then((res) => {
                        console.log(res.data.list);
                        this.tableData=res.data.list
                    })
                    .catch((res) => {
                        console.log("出错了");
                        console.log(res);
                    });
            },
            sl(row){
                console.log(row.bid);
                //this.shoudata=row.bname
                this.shou = true
                this.byte=row

                this.postRequest("/house/building/bytelist",this.byte)
                    .then((res) => {
                        //console.log(res.data);
                        this.shoudata=res.data.bytelist
                    })
                    .catch((res) => {
                        console.log("出错了");
                        console.log(res);
                    });
            },
            cmxz(){
                let row;
                row=this.byte
                console.log(row)

                this.sl(row)
                this.cmxzhx = true

            },
            cjscbu(){
                let row;
                row=this.byte
                console.log(row)

                this.sl(row)
                this.cjsc = true
            },
            xzzfsc(){
                let row;
                row=this.byte
                console.log(row)

                this.sl(row)
                this.xzzf = true
            },
            nyncsc(){
                let row;
                row=this.byte
                console.log(row)

                this.sl(row)
                this.nync = true
            },
            zrzysc(){
                let row;
                row=this.byte
                console.log(row)

                this.sl(row)
                this.zrzy = true
            },
            xzsp(){
                let row;
                row=this.byte
                console.log(row)

                this.sl(row)
                this.sp = true
            },
            getAge(bbirthday){
                // let birthdays = new Date(出生日期.replace(/-/g, "-或者/，根据日期格式选择"));
                let birthdays = new Date(bbirthday.replace(/-/g, "/"));
                let d = new Date();
                let age =
                    d.getFullYear() -
                    birthdays.getFullYear() -
                    (d.getMonth() < birthdays.getMonth() ||
                    (d.getMonth() == birthdays.getMonth() &&
                        d.getDate() < birthdays.getDate())
                        ? 1
                        : 0);
                return age
            },
            dun(){
                this.shou=false
                window.location.reload();
            },
            getreAge(reBirthday){
                // let birthdays = new Date(出生日期.replace(/-/g, "-或者/，根据日期格式选择"));
                let birthdays = new Date(reBirthday.replace(/-/g, "/"));
                let d = new Date();
                let reage =
                    d.getFullYear() -
                    birthdays.getFullYear() -
                    (d.getMonth() < birthdays.getMonth() ||
                    (d.getMonth() == birthdays.getMonth() &&
                        d.getDate() < birthdays.getDate())
                        ? 1
                        : 0);
                return reage
            }
        },
    };
</script>

<style>
    .one {
        border-style: solid;
        border-width: 1px;
        border-color: rgb(189, 187, 187);
    }
    .demo-form-inline{
        border-style: solid;
        border-width: 1px;
        border-color: rgb(189, 187, 187);
    }
</style>